<script setup>
import { ref,reactive,onMounted } from "vue";
import { Avatar, ArrowDown } from "@element-plus/icons-vue";
import Top from "../nav/index.vue";
// import Aside from "../postBar/index.vue";
import Bottom from "../public/bottom/index.vue";
import Swiper from "../homeSwiper/index.vue" ;
import {takeROrGPosts} from "../../api/posts/index.js"
import AsideNav from "../asideNav/index.vue"
// const obj=reactive({data:{}})
// const getPost=async()=>{
//   const{data:{data:data}}=await takeROrGPosts({isfocus_on:"推荐"})
//   obj.data=data
//   console.log(obj.data)
// }
const post=reactive({
  list:[]
})
const getPost=async()=>{
  const params={
    limit:20,
    offset:0
  }
  const{data:{data:data}}=await takeROrGPosts(params)
  post.list=data
  console.log(post.list)
}
onMounted(()=>{
  getPost()
})

let btncolor = ref("white");
let btnmsg = ref("item.isfocus_on");
let btnmsg1=ref("已关注")
let btnhcolor = ref("bisque");
let flag = true;
let change = (item) => {
  // flag = !flag;
  if (item.isfocus_on="推荐") {//如果值为推荐
    btncolor.value = "white";
    btnhcolor.value = "white";
    btnmsg.value ="已关注";//那么点击之后的btn字由 +关注=>已关注
    item.isfocus_on="关注";//然后改变值为关注
  } else {
    btncolor.value = "white";
    btnhcolor.value = "bisque";
    btnmsg.value = "+ 关注";//否则，btn的字就会变为+关注
    item.isfocus_on = "推荐";//然后改变值为推荐
  }
    console.log(item.isfocus_on)
};
// let change3 = () => {
//   flag = !flag;
//   if (flag) {
//     btncolor.value = "white";
//     btnmsg1.value = "已关注";
//     btnhcolor.value = "white";
//   } else {
//     btncolor.value = "white";
//     btnmsg1.value = "+ 关注";
//     btnhcolor.value = "bisque";
//   }
// };
let a=ref("green")
let b=ref("pink")
let msg1=ref("推荐")
let msg2=ref("关注")
let n1=true
let n2=false
function change1(){
  a.value="green"
  b.value="pink"
}
function change2(){
  b.value="green"
  a.value="pink"
}

</script>
<template>
<AsideNav></AsideNav>
  <Top></Top>
  <!-- <Aside></Aside> -->
  <!-- 轮播图部分 -->
  <Swiper></Swiper>


      <!-- 点击切换 -->
    <div class="change">
      <div class="baoguo">
        <div class="tuijian" @click="change1" :style="{color:a}">
          <span
            ><el-icon class="icon" @click="change1" :style="{color:a}"><Avatar /></el-icon>{{msg1}}</span
          >
        </div>
        <div class="shuxian">
          <span>|</span>
        </div>
        <div class="guanzhu"  @click="change2" :style="{color:b}">
          <span
            ><el-icon class="icon"   @click="change2" :style="{color:b}"><Avatar /></el-icon>{{msg2}}</span
          >
        </div>
      </div>
    </div>

      <div class="middle1">
    <!-- 种类分类 -->
    <div class="kind">
      <el-button round>#全部圈子</el-button>
      <el-button round>#手机</el-button>
      <el-button round>#相机</el-button>
      <el-button round>#电脑</el-button>
    </div>

    <!--推荐的页面样式  -->
    <div class="page1" v-for="item in post.list">
      <!-- 头部作者信息 头像 发布时间 等 -->
      <div class="head">
        <div class="tximg">
          <img src="./img/img1.JPG" alt="" />
        </div>
        <div class="publicinfm">
          <p class="name" >{{item.post_user_id}}</p>
          <p class="time">{{item.create_time}}</p>
        </div>
        <div class="follow">
          <button class="gzbtn" @click="change">{{ btnmsg }}</button>
        </div>
      </div>
      <div class="henxian">
        <el-divider></el-divider>
      </div>
      <!-- 发布内容 -->
      <div class="body">
        <div class="fabutext">
          <!-- <p>
            当地时间9月26日，彭博社报道称，苹果将在印度组装最新的iPhone
            14，此时距苹果发布新款iPhone才过去不到三周，这将是苹果首次在新款iPhone发布的第一年就开始在印度制造。印度是仅次于中国的全球第二大智能手机市场，此前印度生产新款iPhone的时间通常比中国滞后6至9个月。
            据科技媒体TechCrunch，苹果合作制造商富士康正在印度清奈（Chennai）附近的Sriperumbudur工厂生iPhone14，预计今年稍晚就会在当地开售。苹果在一封电子邮件声明中表示，“我们很高兴能够在印度生产
            iPhone
            14。”彭博社此前援引据知情人士消息，称苹果一直在与供应商合作，以提高在印度的生产能力，缩小印度和中国生产新iPhone的时间差。iPhone的主要制造商富士康已经研究了如何从中国将零部件发货至印度，并在印度清奈附近的工厂组装iPhone
            14。
          </p> -->
          <p>{{item.post_content}}</p>
          <!-- <a href="">[展开全文]</a> -->
        </div>
        <div class="fabuimg">
          <div class="publicimg">
            <img src="./img/img2.png" alt="" />
            <img src="./img/img2.png" alt="" />
            <img src="./img/img2.png" alt="" />
          </div>
          <div class="publicimg">
            <img src="./img/img2.png" alt="" />
            <!-- <img src="./img/img2.png" alt="">
          <img src="./img/img2.png" alt=""> -->
          </div>
          <!-- <div class="publicimg">
          <img src="./img/img2.png" alt="">
          <img src="./img/img2.png" alt="">
          <img src="./img/img2.png" alt="">
        </div> -->
        </div>

        <!-- 点赞 评论 -->
        <div class="foot">
          <div class="dianzan">
            <svg
              t="1664437226777"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2597"
              width="20"
              height="20"
            >
              <path
                d="M939.358251 423.424662c-23.01825-37.252439-62.924121-60.779272-107.019409-63.209624-2.755764-0.38681-5.510504-0.579191-8.347109-0.579191l-152.202471-0.121773c6.649444-28.975938 10.015098-58.653865 10.015098-88.657202 0-28.223808-3.213181-57.139372-9.556657-85.952604-0.447185-2.043542-1.098008-4.006244-1.932002-5.866614-15.820314-57.302077-67.37755-96.841605-127.282918-96.841605-72.827679 0-132.081201 59.254545-132.081201 132.081201 0 3.334955 0.132006 6.66991 0.406253 10.015098-2.196015 57.211003-32.108279 109.947088-80.269162 141.363611-14.447037 9.42465-18.524912 28.773324-9.099239 43.220361 9.414417 14.437827 28.752858 18.535145 43.220361 9.099239 65.811892-42.925648 106.429984-115.325585 108.656699-193.684234 0.030699-1.332345-0.010233-2.663666-0.14224-3.996011-0.203638-2.012843-0.304945-4.016477-0.304945-6.019087 0-38.381146 31.233352-69.614497 69.614497-69.614497 32.57593 0 60.474326 22.204721 67.824735 53.997821 0.356111 1.534959 0.823761 3.019777 1.402953 4.453429 4.696975 22.814612 7.076162 45.579081 7.076162 67.743894 0 37.485753-6.222725 74.352405-18.494213 109.592001-3.324722 9.546424-1.819438 20.111037 4.02671 28.345582 5.856381 8.245801 15.332197 13.146415 25.448602 13.156648l193.226816 0.101307c1.423419 0.264013 2.857071 0.426719 4.300956 0.477884 24.116257 0.9967 45.935192 13.614066 58.603723 34.090423 7.838525 12.31242 11.438517 26.800389 10.431583 41.939181-0.080841 0.945535-0.121773 1.911536-0.11154 2.877537 0 0.854461 0.040932 1.697665 0.11154 2.53166 0.010233 0.335644-0.030699 0.661056-0.11154 0.976234-0.101307 0.376577-0.193405 0.772596-0.284479 1.159406l-74.972529 330.391802c-0.914836 1.281179-1.738597 2.6432-2.449795 4.046153-5.937223 11.762905-14.660908 21.48329-25.346271 28.172643-10.746762 6.812149-23.059182 10.614755-35.757388 11.06194-0.854461-0.061398-513.766226-0.224104-513.766226-0.224104-0.467651-0.020466-0.935302-0.030699-1.402953-0.030699 0 0-111.01542 0.172939-112.718201 0.457418-1.932002 0-3.446495-1.50426-3.446495-3.415796l0.299829-416.334173c0-1.901303 1.545192-3.446495 3.01466-3.456728l1.245364 0.121773c1.174756 0.132006 2.653433 0.284479 3.52836 0.193405l83.82822-0.222057 0 339.367221c0 17.253966 13.979386 31.233352 31.233352 31.233352s31.233352-13.979386 31.233352-31.233352L281.009092 435.350273c0-1.778506 0-8.631588 0-10.411117 0-17.253966-13.979386-30.928407-31.233352-30.928407-1.50426 0-117.547183 0.304945-119.402437 0.304945-36.34272 0-65.913199 29.566386-65.913199 65.893756l-0.299829 416.334173c0 36.337603 29.571503 65.902966 65.913199 65.902966 2.541893 0 111.406323-0.457418 111.406323-0.457418 0.457418 0.020466 0.925069 0.030699 1.382487 0.030699 0 0 511.458671 0.274246 512.505513 0.274246 25.469068 0 50.296523-7.197936 71.647807-20.73116 19.612687-12.281721 35.777855-29.881564 46.839795-50.967812 3.660366-5.622044 6.435573-11.875468 8.256034-18.615986 0.11154-0.416486 0.213871-0.823761 0.304945-1.240247l74.881454-330.340637c1.596358-6.212492 2.257413-12.586666 2.00261-18.992563C960.892707 473.366098 953.948551 446.331371 939.358251 423.424662z"
                p-id="2598"
              ></path>
              <path
                d="M450.027553 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C481.260905 532.629853 467.281519 518.650467 450.027553 518.650467z"
                p-id="2599"
              ></path>
              <path
                d="M693.805696 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C725.039048 532.629853 711.058638 518.650467 693.805696 518.650467z"
                p-id="2600"
              ></path>
              <path
                d="M648.940882 660.09492c-14.304797-9.393951-33.592073-5.398964-43.159986 8.763594-0.132006 0.193405-13.614066 19.754926-34.171264 19.754926-19.98824 0-32.423457-18.09717-33.266661-19.368116-9.17087-14.427594-28.254507-18.809391-42.834574-9.770528-14.650675 9.109472-19.155269 28.366048-10.055007 43.016723 11.214413 18.047028 41.96988 48.588625 86.156242 48.588625 43.962258 0 75.104535-30.318516 86.572728-48.222281C667.404396 688.461991 663.216004 669.500127 648.940882 660.09492z"
                p-id="2601"
              ></path>
            </svg>
            <span>点赞条数</span>
          </div>
          <div class="pinglun">
            <svg
              t="1664438866122"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3550"
              width="20"
              height="20"
            >
              <path
                d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z"
                p-id="3551"
              ></path>
            </svg>
            <span>评论条数</span>
          </div>
          <div class="shoucang">
            <svg
              t="1664524497598"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3540"
              width="20"
              height="20"
            >
              <path
                d="M616.9 281.1c-4 2-8.3 3-12.7 3-11 0-20.9-6.1-25.8-16l-66.2-134.2-79.1 160.2c-4.3 8.5-12.3 14.4-21.6 15.7l-176.8 25.7 127.9 114.7c6.8 6.7 9.8 16.2 8.3 25.4l-5.5 32.1c-2.4 13.8-14.3 23.8-28.3 23.8-17.8 0-31.3-16-28.3-33.5l3-17.3-122.7-109.5c-14.7-14.4-19.9-35.5-13.5-55 6.4-19.6 23-33.5 43.3-36.4l169.5-24.6 75.8-153.6c9.1-18.4 27.6-29.9 48.1-29.9 20.6 0 39 11.5 48.1 29.9L630 242.7c6.9 14.1 1.1 31.3-13.1 38.4zM575.5 598.5c-7.7 13.4-24.6 18.2-38.3 11.1l-25.1-13.2-23.1 12.2c-13.7 7.2-30.5 2.3-38.3-11.1-8.2-14.1-2.9-32.2 11.5-39.8l6-3.2 30.6-16.1c4.1-2.1 8.7-3.3 13.4-3.3 4.7 0 9.3 1.2 13.4 3.3l30.6 16.1 7.9 4.1c14.4 7.7 19.6 25.8 11.4 39.9zM835.3 371.1L712.6 480.8l3 17.3c3 17.5-10.5 33.5-28.3 33.5-14 0-25.9-10.1-28.3-23.8l-5.5-32.2c-1.6-9.3 1.5-18.8 8.3-25.4l127.9-114.7-117.1-17c-15.6-2.2-26.6-16.8-24.3-32.5 2-14 14.2-24.6 28.4-24.6 1.4 0 2.8 0.1 4.1 0.3l124.8 18.1c20.3 3 36.9 16.9 43.3 36.4 6.3 19.5 1.1 40.6-13.6 54.9z"
                fill="#2c2c2c"
                p-id="3541"
              ></path>
              <path
                d="M888.4 541.4c-7.1-14.9-20.3-25.8-36.1-29.8-3.3-0.8-6.8-1.3-10.3-1.3-2 0-4.1 0.1-6.1 0.4l-2.8 0.4c-2.4 0.4-4.8 0.7-7.2 1.1-138 23-230.1 107.3-313.3 211.1-83.2-103.8-175.2-188.1-313.2-211.1-3-0.5-5.9-0.9-8.8-1.4l-1.2-0.2c-2.1-0.3-4.2-0.5-6.3-0.5-3.4 0-6.8 0.4-10.2 1.2-18.3 4.5-33.3 18.7-39.1 37-1.3 4.1-2 8.4-2 12.7v278.6c0 62.1 50.3 112.4 112.4 112.4H780c62.1 0 112.4-50.3 112.4-112.4V559.5c0.1-6.2-1.3-12.4-4-18.1zM775.7 900h-527c-35.6 0-64.5-28.9-64.5-64.5V563.4c0.2-0.1 0.3-0.2 0.4-0.4 2.2 0.3 4.3 0.6 6.2 1 129.7 21.6 213.9 103.4 289.9 203.7-2.6 4.3-7.8 12.9-18.4 30.7-2.4 4-3.6 8.6-3.6 13.2 0 12.9 9.6 23.9 22.4 25.7 1.2 0.2 2.3 0.2 3.5 0.2 9.1 0 17.6-4.9 22.3-12.7 1.9-3.2 3.9-6.6 5.7-9.7 6.8 11.8 14.4 26.3 21 39.3 5.9 11.7 19.7 17.1 32 12.7 14.7-5.3 21.4-22.2 14.4-36.2-10.4-20.8-21.9-42.4-31.5-57.3-0.1-0.2-0.3-0.5-0.4-0.6-1.3-1.9-2.4-3.7-3.5-5.4 75.9-100.2 160.1-182 289.7-203.6l6-0.9v272.5c-0.1 35.5-28.9 64.4-64.6 64.4z"
                fill="#2c2c2c"
                p-id="3542"
              ></path>
            </svg>
            <span>收藏条数</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="bottom">
    <div class="icon">
      <a href="">
        <el-icon><ArrowDown /></el-icon
      ></a>
    </div>
    <div class="more"><a href="">展开更多</a></div>
  </div>
  <!-- <Bottom></Bottom> -->
</template>
<style scoped lang="scss">


* {
  padding: 0;
  margin: 0;
  // background: whitesmoke;
}

.swiper {
  width: 80%;
  height: 115px;
  background-color: cornflowerblue;
  margin: 0 auto;
}
@media screen and (min-width: 1200px) {
  .change {
  width: 50%;
  margin: 0 auto;
  margin-top: 10px;
  padding: 40px 200px;
  // border-radius: 30px;
  // background-color: cadetblue;
  .baoguo {
    display: flex;
    justify-content: center;
    // margin: 0 auto;
    // .tuijian {
    //   span {
    //     color:v-bind(a);
    //   }
    // }
    // .guanzhu {
    //   span {
    //     color: v-bind(b);
    //   }
    // }  
    .shuxian {
      color: rgba(5, 1, 19, 0.331);
    }
    .tuijian,
    .shuxian {
      margin-right: 40px;
    }

    .tuijian,
    .guanzhu,
    .shuxian {
      // background-color: aquamarine;
      font-size: 30px;
      a {
        text-decoration: none;
      }

      .icon {
        color: rgba(5, 1, 19, 0.331);
        vertical-align: middle;
      }
    }
  }
}
.kind {
  width: 50%;
  height: 40px;
  margin: 0 auto;
  // margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
  // border-radius: 30px;
  // background-color:brown;
}
.page1 {
  width: 65%;
  margin: 0 auto;
  margin-top: 40px;
  background-color: whitesmoke;
  border-radius: 20px;
  // border-radius: 30px;
  // background-color: yellowgreen;
  .head {
    display: flex;
    width: 90%;
    margin: 0 auto;
    padding: 20px;
    // background-color: steelblue;
    position: relative;

    .tximg {
      width: 60px;
      height: 100%;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .publicinfm {
      margin-left: 20px;
      font-size: 15px;
      .time {
        margin-top: 20px;
        font-size: 5px;
      }
    }
    .follow {
      position: absolute;
      right: 110px;
      top: 25px;
      border-radius: 15%;
      border: none;
      outline: none;
      .gzbtn {
        width: 70px;
        height: 35px;
        background-color: v-bind(btncolor);
        border-radius: 30px;
        border: 1px rgba(255, 115, 0, 0.724) solid;
        outline: none;
        color: rgba(255, 115, 0, 0.724);
        font-size: 12px;
        font-weight: 600;
      }

      .gzbtn:hover {
        cursor: pointer;
        background-color: v-bind(btnhcolor);
      }
    }
  }
  .henxian {
    width: 80%;
    margin: 0 auto;
  }
  .body {
    width: 91%;
    margin: 0 auto;
    padding: 10px;
    padding-left: 120px;
    .fabutext {
      width: 103%;
      // a{
      //   text-decoration: none;
      // }
      p {
        width: 60%;
        height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: "宋体";
        white-space: nowrap;
        // text-indent: 2em;
        // line-height: 1.5em;
        text-align: left;
        // font-size: 25px;
      }
    }

    .fabuimg {
      width: 100%;
      margin-top: 5px;
      .publicimg {
        width: 100%;
        // background-color: crimson;
        display: flex;
        margin: 0 auto;
        margin-top: 20px;
        flex-wrap: wrap;
        justify-content: flex-start;

        img {
          width: 150px;
          height: 150px;
          margin-right: 15px;
          border-radius: 10px;
        }
      }
    }
  }
  .foot {
    width: 90%;
    // background-color: cornflowerblue;
    // margin: 0 auto;
    margin-top: 30px;
    // display: flex;
    justify-content: space-around;

    .dianzan,
    .pinglun,
    .shoucang {
      // background-color: darkblue;
      display: inline-block;
      padding: 5px;
      margin-right: 70px;

      span {
        vertical-align: middle;
        font-size: 18px;
      }
      .icon {
        vertical-align: middle;
      }
    }
  }
}
.bottom {
  width: 30%;
  // background-color: tomato;
  margin: 0 auto;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  padding-top: 5px;

  a {
    text-decoration: none;
  }
}
}
@media screen and (max-width: 1200px) {
  .change {
  width: 50%;
  margin: 0 auto;
  margin-top: 10px;
  padding: 40px 60px;
  // border-radius: 30px;
  // background-color: cadetblue;
  .baoguo {
    display: flex;
    justify-content: center;
    // margin: 0 auto;
    // .tuijian {
    //   span {
    //     color:v-bind(a);
    //   }
    // }
    // .guanzhu {
    //   span {
    //     color: v-bind(b);
    //   }
    // }  
    .shuxian {
      color: rgba(5, 1, 19, 0.331);
    }
    .tuijian,
    .shuxian {
      margin-right: 10px;
    }

    .tuijian,
    .guanzhu,
    .shuxian {
      // background-color: aquamarine;
      font-size: 10px;
      a {
        text-decoration: none;
      }

      .icon {
        color: rgba(5, 1, 19, 0.331);
        vertical-align: middle;
      }
    }
  }
}
.kind {
  width: 50%;
  height: 40px;
  margin: 0 auto;
  // margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
  // border-radius: 30px;
  // background-color:brown;
  button {
    height: 18px;
  }
}
.page1 {
  width: 65%;
  margin: 0 auto;
  margin-top: 40px;
  background-color: whitesmoke;
  border-radius: 20px;
  // border-radius: 30px;
  // background-color: yellowgreen;
  .head {
    display: flex;
    width: 90%;
    margin: 0 auto;
    padding: 20px;
    padding-top: 2px;
    // background-color: steelblue;
    position: relative;

    .tximg {
      width: 16px;
      height: 100%;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .publicinfm {
      margin-left: 20px;
      font-size: 12px;
      .time {
        margin-top: 5px;
        font-size: 1px;
      }
    }
    .follow {
      position: absolute;
      right: 77px;
      top: 51px;
      border-radius: 15%;
      border: none;
      outline: none;
      .gzbtn {
        width: 55px;
        height: 17px;
        background-color: v-bind(btncolor);
        border-radius: 30px;
        border: 1px rgba(255, 115, 0, 0.724) solid;
        outline: none;
        color: rgba(255, 115, 0, 0.724);
        font-size: 12px;
        font-weight: 600;
      }

      .gzbtn:hover {
        cursor: pointer;
        background-color: v-bind(btnhcolor);
      }
    }
  }
  .henxian {
    width: 80%;
    margin: 0 auto;
  }
  .body {
    width: 91%;
    margin: 0 auto;
    padding: 10px;
    padding-left: 18px;
    .fabutext {
      width: 103%;
      // a{
      //   text-decoration: none;
      // }
      p {
        width: 60%;
        height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: "宋体";
        white-space: nowrap;
        // text-indent: 2em;
        // line-height: 1.5em;
        text-align: left;
        font-size: 5px;
      }
    }

    .fabuimg {
      width: 100%;
      margin-top: 5px;
      .publicimg {
        width: 100%;
        // background-color: crimson;
        display: flex;
        margin: 0 auto;
        margin-top: 5px;
        flex-wrap: wrap;
        justify-content: flex-start;

        img {
          width: 20px;
          height: 20px;
          margin-right: 15px;
          border-radius: 1px;
        }
      }
    }
  }
  .foot {
    width: 90%;
    // background-color: cornflowerblue;
    // margin: 0 auto;
    // margin-top: 30px;
    // display: flex;
    justify-content: space-around;

    .dianzan,
    .pinglun,
    .shoucang {
      // background-color: darkblue;
      display: inline-block;
      padding: 5px;
      margin-right: 60px;

      span {
        vertical-align: middle;
        font-size: 12px;
      }
      .icon {
        vertical-align: middle;
        width: 10px;
        height: 10px;
      }
    }
  }
}
.bottom {
  width: 30%;
  // background-color: tomato;
  margin: 0 auto;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  padding-top: 5px;

  a {
    text-decoration: none;
    font-size: 10px;
  }
}
}

</style>